<template>
<div>
  <div class="tableBtn">
    <div style="margin-right:10px;" v-for="(item,index) in tableData.batchAction" :key="index">

      <a-dropdown v-if="item.type === 'dropdown'" class="editable-add-btn">
        <a-menu slot="overlay">
          <a-menu-item 
            v-for="(children_item,idx) in item.children"
            :key="idx"
            :disabled="children_item.disabled"
            @click="tableHandle(children_item.tableFnc)"
          >
            {{ children_item.name }}
          </a-menu-item>
        </a-menu>
        <a-button type="primary" style="margin-left: 8px"> {{ item.title }} <a-icon type="down" /> </a-button>
      </a-dropdown>

      <a-button
        v-else
        :icon="item.icon"
        class="editable-add-btn"
        :type="item.item || 'primary'"
        @click="tableHandle(item.tableFnc)"
      >
        {{ item.title }}
      </a-button>
    </div>
  </div>
  <!-- rowKey：选中绑定字段 -->
  <a-spin tip="Loading..." :spinning="tableLoading">
    <a-table
      bordered
      :data-source="tableData.tableDataSource"
      :columns="tableData.tableColumns"
      :row-selection="tableData.rowSelection ? this.rowSelection() : undefined"
      :pagination="false"
      @change="handleTableChange"
      :scroll="{ x: 500 }"
      :rowKey=" tableData.rowKey ? tableData.rowKey === 'string' ? tableData.rowKey : (record,index) => { return index } : 'id' "
    >
      <!-- :rowKey=" tableData.rowKey ? (record,index) => { return (tableData.rowKey ? record[tableData.rowKey] : record.id) } : 'id' " -->
      <!-- 状态 -->
      <template slot="switch" slot-scope="text,row,index,item">
        <a-switch
          :loading="switchLoading"
          :title=" !(text === item.run || text === item.off) ? '该广告组以删除' : ''"
          :disabled=" !(text === item.run || text === item.off) "
          :default-checked="text === item.run ? true : false"
          :checked="text === item.run ? true : false"
          @change="switchChange(row,index,item)"
        />
      </template>
      <!-- 链接 -->
      <template slot="link" slot-scope="text"> <!-- ,row,index,item -->
        <a :href="text" :title="text" target="_blank" >{{text}}</a>
      </template>
      <!-- 类型 -->
      <template slot="filter" slot-scope="text,row,index,item">
        <span
          :style="item.colorEvent ? item.colorEvent(row) : ''"
        >
          {{ item.formatter(row) }}
        </span>
      </template>
      <!-- 循环(展示对象内的数据) -->
      <template slot="cycles" slot-scope="text,row,index,item">
        <span :style="item.colorEvent ? item.colorEvent(row) : ''">
          {{ item.formatter( row[item.forname[0]],item.forname[1]) }}
        </span>
      </template>
      <!-- table列按钮操作 -->
      <template slot="action" slot-scope="text,row,indent,expanded">
        <span v-for="(item,index) in expanded.tableBtn" :key="index">
          <!-- 确认弹窗按钮 -->
          <a-popconfirm
            v-if="item.popconfirm"
            :title="item.popconfirmTitle"
            ok-text="确定"
            cancel-text="取消"
            @confirm="v => tableHandleIn(item.btnType,text)"
          >
            <a-button
              :size="item.size || 'default'"
              style="margin-right:5px;"
              :type="item.type || 'primary'"
            >
              {{ item.title }}
            </a-button>
          </a-popconfirm>
          <!-- 下拉菜单按钮 -->
          <a-dropdown v-else-if="item.dropdown">
            <a-menu slot="overlay">
              <a-menu-item 
                v-for="(children_item,idx) in item.children"
                :key="idx"
                :disabled="children_item.disabled"
                @click="tableHandleIn(children_item.btnType,text)"
              >
                {{ children_item.name }}
                <a-icon v-if="children_item.iconTitle" :title="children_item.title" type="info-circle" />
              </a-menu-item>
              <!-- 多层级 -->
              <a-sub-menu 
                v-if="item.children_sub"
                key="test"
                :title="item.children_sub.children_sub_name"
              >
                <a-menu-item
                  v-for="(sub,index) in item.children_sub.children_sub_item"
                  :key="index"
                  @click="tableHandleIn(sub.btnType,text)"
                >
                  {{ sub.name }}
                </a-menu-item>
              </a-sub-menu>
            </a-menu>
            <a-button size="small" style="margin-right: 5px"> {{ item.title }} <a-icon type="down" /> </a-button>
          </a-dropdown>
          <!-- 正常按钮 -->
          <a-button
            v-else
            :size="item.size || 'default'"
            :disabled="item.disableds ? item.disableds(row) : false "
            :style="{ 'margin-right':'5px','background-color':item.bgColor || '','border':'none' }"
            :type="item.type || 'primary'"
            @click="tableHandleIn(item.btnType,text)"
          >
            {{ item.title }} 
          </a-button>
        </span>
      </template>

    </a-table>
  </a-spin>
</div>
</template>

<script>
export default {
  props:{
    tableData:{
      checked:false,
      type:Object,
    },
    tableLoading:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      // tableLoading:false,
      switchLoading:false
    };
  },
  methods: {
    // 选项
    rowSelection(){
      return {
        onChange: (RowKeys) => {
          this.$emit('rowSelection',RowKeys)
        },
      };
    },
    // 分页、筛选、排序
    handleTableChange(pagination,filters,sorter ){      
      if( Object.keys(sorter).length > 0 ) this.$emit('sortChange',sorter)
    },
    // 表格头部按钮
    tableHandle(tableFnc){
      this.$emit('tableHandleOut',tableFnc)
    },
    // table表内列按钮
    tableHandleIn(btnType,text){
      this.$emit('tableHandleIn',btnType,text)
    },
    // switch开关
    async switchChange(row,index,item){
      this.switchLoading = true
      this.$emit('switchChange',row,item,index)
      setTimeout(() => {
        this.switchLoading = false
      }, 1000);
    },
  },
}
</script>

<style>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}
/* table外按钮样式 */
.tableBtn{
  display: flex;

}
</style>